<template>
  <div class="songs-container">
    <div class="tab-bar">
      <span class="item" :class="{ active: tag === 0 }" @click="tag = 0">全部</span>
      <span class="item" :class="{ active: tag === 7 }" @click="tag = 7">华语</span>
      <span class="item" :class="{ active: tag === 96 }" @click="tag = 96">欧美</span>
      <span class="item" :class="{ active: tag === 8 }" @click="tag = 8">日本</span>
      <span class="item" :class="{ active: tag === 16 }" @click="tag = 16">韩国</span>
    </div>
    <el-table :data="songs" stripe class="playlit-table" @row-click="handleTableClick">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="album" width="130">
        <template slot-scope="scope">
          <div class="img-wrap">
            <img v-lazy="scope.row.album.picUrl+'?param=130y130'" alt />
            <span class="iconfont icon-play"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="音乐标题" width="300">
        <template slot-scope="scope">
          <div class="song-wrap">
            <div class="name-wrap">
              <span>{{ scope.row.name }}</span>
              <span class="iconfont icon-mv"></span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="album.artists[0].name" label="歌手" width="200"></el-table-column>
      <el-table-column prop="album.name" label="专辑" width="280"></el-table-column>
      <el-table-column prop="duration" label="时长">
        <template slot-scope="scope">{{scope.row.duration | playTimeFormat}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getNewSongs } from 'request/api'

export default {
  name: 'songs',
  data() {
    return {
      songs: [],
      tag: 0
    }
  },

  created() {
    this._getNewSongs()
  },

  watch: {
    tag() {
      this._getNewSongs()
    }
  },
  methods: {
    // 获取最新音乐
    async _getNewSongs() {
      const NewSongsData = await getNewSongs({ areaId: this.tag })
      this.songs = NewSongsData.data.slice(0, 20)
    },
    async handleTableClick(row) {
      PubSub.publish('AudioUpdateFromNewSongsList', row)
    }
  }
}
</script>

<style >
.el-table td,
.el-table th.is-leaf {
  border: none;
}
</style>
